<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        .container {
            position: relative;
            width: 1000px;
            height: 400px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }
        .container .wrap {
            position: absolute;
            width: 7000px;
            height: 400px;
            z-index: 1;
        }
        .container .wrap img {
            float: left;
            width: 1000px;
            height: 400px;
        }
        .container .buttons {
            position: absolute;
            right: 430px;
            bottom:40px;
            width: 150px;
            height: 10px;
            z-index: 2;
        }
        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: grey;
            text-align: center;
            color:white;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="wrap" style="left: -1000px;">
        <img src="images/music-5.jpg" alt="5">
        <img src="images/music-1.jpg" alt="1">
        <img src="images/music-2.jpg" alt="2">
        <img src="images/music-3.jpeg" alt="3">
        <img src="images/music-4.jpg" alt="4">
        <img src="images/music-5.jpg" alt="5">
        <img src="images/music-1.jpg" alt="1">
    </div>
    <div class="buttons">
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <a href="javascript:;" class="arrow arrow_left">&lt;</a>
    <a href="javascript:;" class="arrow arrow_right">&gt;</a>
</div>
<script>
    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
        next_pic();
    }
    prev.onclick = function () {
        prev_pic();
    }
    function next_pic () {
        index++;
        if(index > 4){
            index = 0;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "-6000px"){
            newLeft = -2000;
        }else{
            newLeft = parseInt(wrap.style.left)-1000;
        }
        wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
        index--;
        if(index < 0){
            index = 4;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "0px"){
            newLeft = -4000;
        }else{
            newLeft = parseInt(wrap.style.left)+1000;
        }
        wrap.style.left = newLeft + "px";
    }
    var timer = null;
    function autoPlay () {
        timer = setInterval(function () {
            next_pic();
        },2000);
    }
    autoPlay();
    var container = document.querySelector(".container");
    container.onmouseenter = function () {
        clearInterval(timer);
    }
    container.onmouseleave = function () {
        autoPlay();
    }
    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
        for(var i = 0, len = dots.length; i < len; i++){
            dots[i].className = "";
        }
        dots[index].className = "on";
    }
    for (var i = 0, len = dots.length; i < len; i++){
        (function(i){
            dots[i].onclick = function () {
                var dis = index - i;
                if(index == 4 && parseInt(wrap.style.left)!==-5000){
                    dis = dis - 5;
                }
                //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                if(index == 0 && parseInt(wrap.style.left)!== -1000){
                    dis = 5 + dis;
                }
                wrap.style.left = (parseInt(wrap.style.left) +  dis * 1000)+"px";
                index = i;
                showCurrentDot();
            }
        })(i);
    }


</script>
</body>
</html>